import { DirectiveBinding } from "vue";

// 注册在全局的自定义指令createInstruct2：
export function createInstruct2(el: HTMLElement, binding: DirectiveBinding, vnode) {
  console.log(el, binding)
  console.log(binding.value)
  console.log(vnode.el.innerHTML)
  // if (JSON.parse(binding.value)) {
  //   // el.style.display="none";
  //   el.remove();
  // },
  // 全局自定义指令使用生命周期
  return {
    created(el, binding, vnode){
      console.log(el, binding, vnode)
    },
    mounted(el, binding, vnode){
      console.log(el, binding, vnode)
      // 绑定鼠标和触摸事件
      // 绑定事件：click、mousedown、touchstart、mouseup、mouseleave、touchend
      el.addEventListener('click', clickFun)
      function clickFun(e){
        console.log("自定义指令绑定事件",e)
      }
    }
  }
}

// 局部指令简化写法----使用时要复制到vue组件下或是引入到vue组件下
export const directives = {
  // highlight、color 自定义指令名称
  highlight: (el:HTMLElement, binding:DirectiveBinding) => {
    el.style.color = binding.value
  },
  color: (el: HTMLElement, binding: DirectiveBinding) => {
    el.style.color = binding.value
  },
  // 带有生命周期钩子函数的自定义指令：created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted
  handleOnce: {
    created(el:HTMLElement, binding:DirectiveBinding) {
      console.log('created', el, binding)
    },
    mounted(el:HTMLElement, binding:DirectiveBinding, data) {
      checkPermission(el, binding, data);
    },
    updatated(el:HTMLElement, binding:DirectiveBinding) {
      console.log('updatated', el, binding)
    }
  }
}

// 自定义指令抽出的处理函数
function checkPermission(el:HTMLElement, binding:DirectiveBinding, data) {
  console.log(el, binding)
  console.log(binding.value)
  console.log(data)
}